<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>美味餐厅点餐系统</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
	<style>
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		}
		
		body {
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			color: #333;
			line-height: 1.6;
			padding: 20px;
			min-height: 100vh;
		}
		
		.container {
			max-width: 1200px;
			margin: 0 auto;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}
		
		header {
			background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
			color: white;
			padding: 25px;
			text-align: center;
		}
		
		h1 {
			font-size: 2.5rem;
			margin-bottom: 10px;
		}
		
		.header-desc {
			font-size: 1.1rem;
			opacity: 0.9;
		}
		
		.content {
			display: grid;
			grid-template-columns: 1fr 1.5fr;
			gap: 25px;
			padding: 25px;
		}
		
		.section {
			margin-bottom: 25px;
		}
		
		h2 {
			color: #ff7e5f;
			margin-bottom: 15px;
			padding-bottom: 8px;
			border-bottom: 2px solid #eee;
			font-size: 1.5rem;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		h3 {
			color: #555;
			margin-bottom: 12px;
			font-size: 1.2rem;
		}
		
		.table-selection {
			margin-bottom: 20px;
		}
		
		.tables {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
			gap: 12px;
			margin-bottom: 20px;
		}
		
		.table {
			padding: 15px 10px;
			background: #f9f9f9;
			border-radius: 8px;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s;
			border: 2px solid transparent;
			font-weight: bold;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
		}
		
		.table:hover {
			background: #e9e9e9;
			transform: translateY(-3px);
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		}
		
		.table.selected {
			background: #E3F2FD;
			border-color: #2196F3;
			color: #2196F3;
		}
		
		.table.confirmed {
			background: #E8F5E9;
			border-color: #4CAF50;
			color: #2E7D32;
			cursor: not-allowed;
		}
		
		.category-filter {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 15px;
		}
		
		.category-btn {padding: 8px 15px;
			background: #f1f1f1;
			border: none;
			border-radius: 20px;
			cursor: pointer;
			transition: all 0.3s;
			font-size: 0.9rem;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		}
		
		.category-btn:hover {
			background: #e0e0e0;
		}
		
		.category-btn.active {
			background: #ff7e5f;
			color: white;
		}
		
		.menu {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
			gap: 15px;
			max-height: 300px;
			overflow-y: auto;
			padding: 10px;
			border: 1px solid #eee;
			border-radius: 8px;
		}
		
		.menu-item {
			padding: 15px;
			background: #f9f9f9;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s;
			text-align: center;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
		}
		
		.menu-item:hover {
			background: #e9e9e9;
			transform: translateY(-3px);
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		}
		
		.menu-item h3 {
			font-size: 1rem;
			margin-bottom: 5px;
			color: #333;
		}
		
		.menu-item p {
			color: #ff7e5f;
			font-weight: bold;
		}
		
		.order-summary {
			background: #f9f9f9;
			padding: 20px;
			border-radius: 8px;
			margin-bottom: 20px;
			border: 1px solid #eee;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
		}
		
		.confirmed-table {
			background: #E8F5E9;
			padding: 10px;
			border-radius: 6px;
			margin-bottom: 15px;
			text-align: center;
			font-weight: bold;
			color: #2E7D32;
		}
		
		.order-items {
			list-style: none;
			margin: 15px 0;
		}
		
		.order-items li {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			border-bottom: 1px dashed #ddd;
			align-items: center;
		}
		
		.new-item {
			background-color: #FFF8E1;
			border-radius: 4px;
			padding: 5px;
			animation: highlight 2s ease;
		}
		
		@keyframes highlight {
			0% { background-color: #FFECB3; }
			100% { background-color: #FFF8E1; }
		}
		
		.delete-btn {
			background: #ff5252;
			color: white;
			border: none;
			border-radius: 4px;
			padding: 4px 8px;
			cursor: pointer;
			font-size: 0.8rem;
			transition: all 0.2s;
		}
		
		.delete-btn:hover {
			background: #ff0000;
			transform: scale(1.05);
		}
		
		.total-price {
			font-weight: bold;
			font-size: 1.3rem;
			color: #ff7e5f;
			margin: 15px 0;
			text-align: right;
		}
		
		.submit-btn {
			padding: 15px 25px;
			background: #4CAF50;
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s;
			font-size: 1.1rem;
			font-weight: bold;
			width: 100%;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}
		
		.submit-btn:hover {
			background: #45a049;
			transform: translateY(-2px);
			box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
		}
		
		.submit-btn:disabled {
			background: #cccccc;
			cursor: not-allowed;
			transform: none;
			box-shadow: none;
		}
		
		.add-more-btn {
			padding: 12px 20px;
			background: #2196F3;
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s;
			font-weight: bold;
			display: block;
			margin: 0 auto;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		}
		
		.add-more-btn:hover {
			background: #0b7dda;
			transform: translateY(-2px);
			box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
		}
		
		footer {
			text-align: center;
			padding: 20px;
			color: #777;
			margin-top: 20px;
			border-top: 1px solid #eee;
			background: #f9f9f9;
		}
		
		.notification {
			position: fixed;
			top: 20px;
			right: 20px;
			padding: 15px 20px;
			background: #4CAF50;
			color: white;
			border-radius: 8px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
			transform: translateX(200%);
			transition: transform 0.3s ease-in-out;
			z-index: 1000;
		}
		
		.notification.show {
			transform: translateX(0);
		}
		
		@media (max-width: 768px) {
			.content {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>美味餐厅点餐系统</h1>
			<p class="header-desc">请选择桌号并点选菜品</p>
		</header>

		<div class="content">
			<div class="left-panel">
				<div class="section">
					<h2><i class="fas fa-chair"></i> 选择桌号</h2>
					<div class="table-selection">
						<p>请选择您的桌号（选择后不可更改）</p>
						<div class="tables" id="tables-container">
							<!-- 桌号将通过JS动态生成 -->
						</div>
					</div>
				</div>

				<div class="section">
					<h2><i class="fas fa-list"></i> 菜单分类</h2>
					<div class="category-filter" id="category-filter">
						<!-- 菜品分类将通过JS动态生成 -->
					</div>
				</div>
			</div>

			<div class="right-panel">
				<div class="section">
					<h2><i class="fas fa-utensils"></i> 菜单</h2>
					<div class="menu" id="menu-container">
						<!-- 菜单项将通过JS动态生成 -->
					</div>
				</div>

				<div class="section">
					<h2><i class="fas fa-receipt"></i> 当前订单</h2>
					<div class="order-summary">
						<div id="table-confirmation">
							<p>桌号: <span id="current-table">未选择</span></p>
						</div>
						<ul class="order-items" id="order-items">
							<li>请先选择桌号并添加菜品</li>
						</ul>
						<div class="total-price">总价: ￥<span id="total-price">0</span></div>
						<button id="submit-order" class="submit-btn" disabled>提交订单</button>
						<button id="add-more" class="add-more-btn" style="display: none;">继续添加菜品</button>
					</div>
				</div>
			</div>
		</div>

		<footer>
		</footer>
	</div>

	<div class="notification" id="notification">
		订单已成功提交到后厨！
	</div>
	
<script>
		// 模拟数据
		const tables = [1, 2, 3, 4, 5, 6, 7, 8];
		const categories = ['全部', '主食', '炒菜', '汤类', '饮品', '甜点'];
		const menuItems = [
			{ id: 1, name: "宫保鸡丁", price: 38, category: "炒菜" },
			{ id: 2, name: "鱼香肉丝", price: 32, category: "炒菜" },
			{ id: 3, name: "水煮鱼", price: 58, category: "炒菜" },
			{ id: 4, name: "麻婆豆腐", price: 28, category: "炒菜" },
			{ id: 5, name: "回锅肉", price: 42, category: "炒菜" },
			{ id: 6, name: "清炒时蔬", price: 22, category: "炒菜" },
			{ id: 7, name: "酸辣汤", price: 18, category: "汤类" },
			{ id: 8, name: "西红柿鸡蛋汤", price: 15, category: "汤类" },
			{ id: 9, name: "白饭", price: 3, category: "主食" },
			{ id: 10, name: "炒面", price: 12, category: "主食" },
			{ id: 11, name: "可乐", price: 5, category: "饮品" },
			{ id: 12, name: "果汁", price: 8, category: "饮品" },
			{ id: 13, name: "冰淇淋", price: 10, category: "甜点" },
			{ id: 14, name: "水果拼盘", price: 25, category: "甜点" }
		];

		// 状态管理
		let currentTable = null;
		let tableConfirmed = false;
		let currentOrder = {
			table: null,
			items: [],
			total: 0,
			status: 'pending',
			timestamp: null
		};
		let currentCategory = '全部';

		// 初始化
		document.addEventListener('DOMContentLoaded', function() {
			initTables();
			initCategoryFilter();
			initMenu();
			updateOrderSummary();

			// 提交订单
			document.getElementById('submit-order').addEventListener('click', submitOrder);
			
			// 继续添加菜品
			document.getElementById('add-more').addEventListener('click', function() {
				document.getElementById('menu-container').scrollIntoView({ behavior: 'smooth' });
			});
		});

		// 初始化桌号选择
		function initTables() {
			const tablesContainer = document.getElementById('tables-container');
			tablesContainer.innerHTML = '';
			
			tables.forEach(table => {
				const tableElement = document.createElement('div');
				tableElement.className = 'table';
				tableElement.innerHTML = `<i class="fas fa-table"></i> ${table}`;
				tableElement.addEventListener('click', () => selectTable(table));
				tablesContainer.appendChild(tableElement);
			});
		}

		// 初始化分类筛选
		function initCategoryFilter() {
			const categoryFilter = document.getElementById('category-filter');
			categoryFilter.innerHTML = '';
			
			categories.forEach(category => {
				const button = document.createElement('button');
				button.className = `category-btn ${category === '全部' ? 'active' : ''}`;
				button.innerHTML = `<i class="fas ${getCategoryIcon(category)}"></i> ${category}`;
				button.addEventListener('click', () => filterMenuByCategory(category));
				categoryFilter.appendChild(button);
			});
		}

		// 获取分类图标
		function getCategoryIcon(category) {
			switch(category) {
				case '主食': return 'fa-bread-slice';
				case '炒菜': return 'fa-utensils';
				case '汤类': return 'fa-mug-hot';
				case '饮品': return 'fa-glass-whiskey';
				case '甜点': return 'fa-ice-cream';
				default: return 'fa-list';
			}
		}

		// 按分类筛选菜单
		function filterMenuByCategory(category) {
			currentCategory = category;
			
			// 更新按钮状态
			document.querySelectorAll('.category-btn').forEach(btn => {
				btn.classList.toggle('active', btn.textContent.includes(category));
			});
			
			// 更新菜单显示
			initMenu();
		}

		// 初始化菜单
		function initMenu() {
			const menuContainer = document.getElementById('menu-container');
			menuContainer.innerHTML = '';
			
			const filteredItems = currentCategory === '全部' 
				? menuItems 
				: menuItems.filter(item => item.category === currentCategory);
			
			if (filteredItems.length === 0) {
				menuContainer.innerHTML = '<p>该分类下暂无菜品</p>';
				return;
			}
			
			filteredItems.forEach(item => {
				const menuItemElement = document.createElement('div');
				menuItemElement.className = 'menu-item';
				menuItemElement.innerHTML = `
					<h3>${item.name}</h3>
					<p>￥${item.price}</p>
					<small>${item.category}</small>
				`;
				menuItemElement.addEventListener('click', () => addToOrder(item));
				menuContainer.appendChild(menuItemElement);
			});
		}

		// 选择桌号
		function selectTable(table) {
			if (tableConfirmed) {
				alert('桌号已确认，不可更改');
				return;
			}
			
			currentTable = table;
			currentOrder.table = table;
			
			// 更新UI
			document.querySelectorAll('.table').forEach(el => {
				el.classList.remove('selected');
				if (parseInt(el.textContent) === table) {
					el.classList.add('selected');
				}
			});
			
			document.getElementById('current-table').textContent = table;
			
			// 启用提交按钮
			document.getElementById('submit-order').disabled = false;
		}

		// 确认桌号
		function confirmTable() {
			if (!currentTable) {
				alert('请先选择桌号');
				return;
			}
			
			tableConfirmed = true;
			
			// 更新UI
			document.querySelectorAll('.table').forEach(el => {
				if (parseInt(el.textContent) === currentTable) {
					el.classList.remove('selected');
					el.classList.add('confirmed');
				} else {
					el.style.opacity = '0.5';
					el.style.cursor = 'not-allowed';
				}
			});
			
			// 更新桌号显示
			document.getElementById('table-confirmation').innerHTML = `
				<div class="confirmed-table">
					<i class="fas fa-check-circle"></i> 已确认: 桌号 ${currentTable}
				</div>
			`;
			
			// 显示继续添加按钮
			document.getElementById('add-more').style.display = 'block';
		}

		// 添加菜品到订单
		function addToOrder(item) {
			if (!currentTable) {
				alert('请先选择桌号');
				return;
			}
			
			// 如果桌号尚未确认，先确认
			if (!tableConfirmed) {
				confirmTable();
			}
			
			// 检查是否已存在相同菜品
			const existingItem = currentOrder.items.find(i => i.id === item.id);
			if (existingItem) {
				existingItem.quantity += 1;
			} else {
				currentOrder.items.push({
					id: item.id,
					name: item.name,
					price: item.price,
					quantity: 1,
					isNew: true // 标记为新添加的菜品
				});
			}
			
			updateOrderSummary();
		}

		// 删除订单中的菜品
		function removeFromOrder(itemId) {
			const itemIndex = currentOrder.items.findIndex(item => item.id === itemId);
			if (itemIndex !== -1) {
				if (currentOrder.items[itemIndex].quantity > 1) {
					currentOrder.items[itemIndex].quantity -= 1;
				} else {
					currentOrder.items.splice(itemIndex, 1);
				}
				updateOrderSummary();
			}
		}

		// 更新订单摘要
		function updateOrderSummary() {
			const orderItemsContainer = document.getElementById('order-items');
			orderItemsContainer.innerHTML = '';
			
			let total = 0;
			
			if (currentOrder.items.length === 0) {
				orderItemsContainer.innerHTML = '<li>请先添加菜品</li>';
			} else {
				currentOrder.items.forEach(item => {
					const li = document.createElement('li');
					if (item.isNew) {
						li.classList.add('new-item');
						// 2秒后移除新标记
						setTimeout(() => {
							item.isNew = false;
							li.classList.remove('new-item');
						}, 2000);
					}
					
					li.innerHTML = `
						<span>${item.name} x${item.quantity}</span>
						<span>￥${item.price * item.quantity}</span>
						<button class="delete-btn" data-id="${item.id}"><i class="fas fa-trash"></i></button>
					`;
					orderItemsContainer.appendChild(li);
					total += item.price * item.quantity;
					
					// 添加删除事件
					li.querySelector('.delete-btn').addEventListener('click', (e) => {
						e.stopPropagation();
						removeFromOrder(item.id);
					});
				});
			}
			
			document.getElementById('total-price').textContent = total;
			currentOrder.total = total;
		}

		// 显示通知
		function showNotification(message) {
			const notification = document.getElementById('notification');
			notification.textContent = message;
			notification.classList.add('show');
			
			setTimeout(() => {
				notification.classList.remove('show');
			}, 3000);
		}

		// 提交订单
		function submitOrder() {
			if (!currentTable || currentOrder.items.length === 0) {
				alert('请选择桌号并添加菜品');
				return;
			}
			
			// 如果桌号尚未确认，先确认
			if (!tableConfirmed) {
				confirmTable();
			}
			
			// 设置时间戳
			currentOrder.timestamp = new Date().toLocaleString();
			currentOrder.status = 'pending';
			
			// 获取现有订单或初始化空数组
			let allOrders = JSON.parse(localStorage.getItem('restaurant_orders')) || [];
			
			// 检查是否已有该桌号的订单
			const existingOrderIndex = allOrders.findIndex(order => order.table === currentTable && order.status === 'pending');
			
			if (existingOrderIndex !== -1) {
				// 合并订单
				currentOrder.items.forEach(newItem => {
					const existingItemIndex = allOrders[existingOrderIndex].items.findIndex(item => item.id === newItem.id);
					
					if (existingItemIndex !== -1) {
						// 如果菜品已存在，增加数量
						allOrders[existingOrderIndex].items[existingItemIndex].quantity += newItem.quantity;
						// 标记为新添加的
						allOrders[existingOrderIndex].items[existingItemIndex].isNew = true;
					} else {
						// 如果菜品不存在，添加新菜品
						allOrders[existingOrderIndex].items.push(newItem);
					}
				});
				
				// 更新总价
				allOrders[existingOrderIndex].total = currentOrder.total;
				allOrders[existingOrderIndex].timestamp = currentOrder.timestamp;
			} else {
				// 添加新订单
				allOrders.push({...currentOrder});
			}
			
			localStorage.setItem('restaurant_orders', JSON.stringify(allOrders));
			
			// 显示通知
			showNotification('订单已成功提交到后厨！');
			
			// 重置当前订单（保持桌号不变）
			currentOrder.items = [];
			currentOrder.total = 0;
			
			// 更新UI
			updateOrderSummary();
		}
	</script>
</body>
</html>